

let _Vue = null
class VueRouter {
  static install(Vue){
    //1 判断当前插件是否被安装
    if(VueRouter.install.installed){
        return;
    }
    VueRouter.install.installed = true
    //2 把Vue的构造函数记录在全局
    _Vue = Vue
    //3 把创建Vue的实例传入的router对象注入到Vue实例
    _Vue.mixin({
      beforeCreate(){
        if(this.$options.router){
          _Vue.prototype.$router = this.$options.router 
        }   
      }
    })
  }
  constructor(options){
      this.options = options
      this.options.mode = this.options.mode || 'hash'
      this.routeMap = {}
      // observable
      this.data = _Vue.observable({
          current: this.options.mode === 'hash' ? '/#/' : '/'
      })
      this.init()

  }
  init(){
      this.createRouteMap()
      this.initComponent(_Vue)
      this.initEvent()
  }
  createRouteMap(){
      //遍历所有的路由规则 吧路由规则解析成键值对的形式存储到routeMap中
      this.options.routes.forEach(route => {
          route.path = this.options.mode === 'hash' ? '/#' + route.path : route.path
          this.routeMap[route.path] = route.component
      });
  }
  initComponent(Vue){
      const self = this
      Vue.component("router-link",{
          props:{
              to:String
          },
          render(h){
              return h("a",{
                  attrs:{
                      href: self.options.mode === 'hash' ? '/#' + this.to : this.to
                  },
                  on:{
                      click:this.clickhander
                  }
              },[this.$slots.default])
          },
          methods:{
              clickhander(e){
                  if (self.options.mode === 'hash') {
                    this.$router.data.current = '/#'+this.to
                  } else {
                    this.$router.data.current = this.to
                    history.pushState({},"",this.to)
                    e.preventDefault()
                  }
              }
          }
          // template:"<a :href='to'><slot></slot><>"
      })

      Vue.component("router-view",{
          render(h){
              const cm=self.routeMap[self.data.current]

              return h(cm)
          }
      })
      
  }
  initEvent(){
      if (this.options.mode === 'hash') {
        window.addEventListener("hashchange",()=>{
          this.data.current = '/'+window.location.hash
        })
      } else {
        window.addEventListener("popstate",()=>{
          this.data.current = window.location.pathname
        })
      }
  }
}

export default VueRouter